<template>
  <div class="page-header">
    <div class="page-header-content">
      <div class="page-header-left">
        <h1 class="page-title">{{ title }}</h1>
        <p v-if="description" class="page-description">{{ description }}</p>
      </div>
      <div v-if="$slots.extra" class="page-header-extra">
        <slot name="extra"></slot>
      </div>
    </div>
    <div v-if="showBreadcrumb" class="page-breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item 
          v-for="item in breadcrumbList" 
          :key="item.path"
          :to="item.path"
        >
          {{ item.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: ''
  },
  showBreadcrumb: {
    type: Boolean,
    default: true
  },
  breadcrumbList: {
    type: Array,
    default: () => []
  }
})

const route = useRoute()

// 如果没有传入面包屑，则根据路由自动生成
const breadcrumbList = computed(() => {
  if (props.breadcrumbList.length > 0) {
    return props.breadcrumbList
  }
  
  const matched = route.matched.filter(item => item.meta && item.meta.title)
  return matched.map(item => ({
    name: item.meta.title,
    path: item.path
  }))
})
</script>

<style lang="scss" scoped>
.page-header {
  background: #fff;
  padding: 16px 24px;
  margin-bottom: 16px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  .page-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;

    .page-header-left {
      flex: 1;

      .page-title {
        margin: 0 0 8px 0;
        font-size: 20px;
        font-weight: 500;
        color: #262626;
      }

      .page-description {
        margin: 0;
        color: #8c8c8c;
        font-size: 14px;
      }
    }

    .page-header-extra {
      flex-shrink: 0;
      margin-left: 16px;
    }
  }

  .page-breadcrumb {
    :deep(.el-breadcrumb) {
      font-size: 14px;
    }
  }
}
</style>